<template>
  <div>
      <div class="button-box" style="margin-top: 20px;">
        <el-button type="primary" style="width: 90px;height: 90%;" icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加</el-button>
      </div>
    <common-table
    :tableData="tableData"
    :tableLabel="tableLabel"
    :config="config"
    @getTableData="getTableData"
    ></common-table>
    <!--     添加产品弹出框-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" width="35%"  @close="cancelModal">
      <el-form>
        <el-form-item label="名称：" label-width="120px">
          <el-input v-model="addWallpaper.name" placeholder="请输入名称（选填）" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="描述：" label-width="120px">
          <el-input v-model="addWallpaper.description" placeholder="请输入描述（选填）" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="图片:" label-width="120px">
          <div >
            <img :src="addWallpaper.img" class="picture" v-show="addWallpaper.isEdit">
            <img src="../.././assets/change.png" class="change-icon" v-show="addWallpaper.isEdit">
            <el-upload
              action="https://hospital.osako.top/massage/picture/upload"
              list-type="picture-card"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handlePhoto"
              :class="{hide:hideUpload}"
              v-loading.fullscreen.lock="fullscreenLoading">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="uploadPicture">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonTable from "@/components/commonTable";
import {addWallpaper, deleteWallpaper, getWallpaper} from "@/api/wallpaper";
import {getToken} from "@/utils/auth";
import axios from "axios";
import {tips} from "@/common/js/optionTips";
import {cancelAppoint, completeAppoint} from "@/api/doctor";
export default {
  name: 'wallpaper',
  data(){
    return{
      dialogFormVisible:false,
      hideUpload: false,
      fullscreenLoading: false, // 进行整个屏幕的加载的
      fileList: [],
      config: {
        page: 1,
        total: 20,
        loading: false //加载数据
      },
      addWallpaper:{
        description:'',
        img:'',//图片地址
        name:'',
        sort:'',//排序,
        url:'',//跳转路径,
        isEdit:false
      },
      tableLabel:[
        {
          prop: 'id',
          label: '序号',
          width: 100
        },
        {
          prop: 'image',
          label: '图片',
          type: 'image',
          width: 300
        },
        {
          prop: 'label',
          label: '名称',
          width: 300
        },
        {
          prop: 'description',
          label: '描述',
          width: 300
        }
      ],
      tableData:[]
    }
  },
  methods:{
    // 关闭模态框
    cancelModal: function () {
      this.dialogFormVisible = false
      this.addWallpaper.name = ''
      this.addWallpaper.description = ''
      this.addWallpaper.img = ''
      this.imgUrl = ''
      this.fileList = []
      this.hideUpload = false
    },
    // 当上传了一张照片上去
    handlePhoto: function (file, fileList) {
      this.imgFile = file;
      this.hideUpload = fileList.length >= 1;
    },
    // 删除上传的照片
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.fileList = []
      } else {
        let dl = this.fileList.indexOf(file);
        this.fileList.splice(dl, 1)
      }
      this.hideUpload = fileList.length >= 1
    },
    handlePictureCardPreview(file) {
      this.imgUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片
    uploadPicture: function() {
      //如果是编辑师傅信息且没有上传图片，就不调用上传图片,不然会报错
      // if(this.doctorData.isEdit && !this.hideUpload){
      //   this.updateDoctor()
      //   return;
      // }
      this.fullscreenLoading = true;
      const url = 'https://hospital.osako.top/massage/picture/upload';
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': getToken()
        }
      };
      const param = new FormData();
      // 将图片加入formdata
      param.append('file', this.imgFile.raw);
      axios.post(url, param, config).then(res => {
        if (res.data.code === 200) {
          this.addWallpaper.img = res.data.data
          addWallpaper(this.addWallpaper).then(res=>{
            this.fullscreenLoading = false;
            if(res.code === 200){
              tips('success', '添加成功')
            }
            this.getWallpaper()
            this.cancelModal()
          }).catch(()=>{
            tips("error",'添加失败')
          })
        }
      }).catch(() => {
        this.fullscreenLoading = false;
        tips('error','上传图片失败')
      });
    },
    getWallpaper: function(){
      this.tableData = []
      getWallpaper().then(res=>{
        let that = this
        if(res.code === 200){
          //console.log(res)
          let data = res.data
          data.forEach(function (item,index){
            that.tableData.push({
              id:item.id,
              image:item.img,
              label:item.name,
              description:item.description
            })
          })
        }
      })
    },
    getTableData: function(option){
      if (option.buttonName === '编辑') {

      } else if (option.buttonName === '删除') {
        this.$confirm('确认删除轮播图吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          deleteWallpaper(option.scopeRow.id).then(res=>{
            if(res.code === 200){
              tips('success','删除成功')
            }
            this.getWallpaper()
          })
        })
      }
    },
  },
  created() {
    this.getWallpaper()
  }
}
</script>

<style lang="scss">

</style>
